<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <!-- <script src="https://cdn.jsdelivr.net/npm/zrender@4.3.0/dist/zrender.js"></script> -->
    <script src="./js/zrender.js"></script>

    <title>class</title>
</head>

<body>
    <div id="container" style="height: 600px; width: 1000px;"></div>


    <script>
        var zr = zrender.init(document.getElementById('container'));
        // var rect = new zrender.Rect({
        //     shape: {
        //         x: 80,
        //         y: 100,
        //         width: 100,
        //         height: 200,
        //         r: [30],
        //     },
        //     style: {
        //         fill: 'red',
        //         stroke: 'none',
        //     },
        //     z: 1,
        // });

        // var circle = new zrender.Circle({
        //     shape: {
        //         cx: 200,
        //         cy: 100,
        //         r: 50.
        //     },
        //     style: {
        //         fill: '#153472',
        //         stroke: 'green',
        //         lineWidth:2,
        //     },
        //     z: 1,
        // });
        // var arc = new zrender.Arc({
        //     shape: {
        //         cx: 400,
        //         cy: 100,
        //         r: 50,
        //         startAngle:-35,
        //         clockwise:false,
        //     },
        //     style: {
        //         // fill: '#153472',
        //         stroke: 'green',
        //         lineWidth:20,
        //     },
        //     z: 1,
        // });

        // // rect.setClipPath(circle);
        // circle.setClipPath(rect);






        // rect.animate('shape', true)
        //     .when(1000, { x: 100 })
        //     .when(2000, { x: 0 })
        //     .when(3000, { y: 100 })
        //     .when(4000, { y: 0 })
        //     .start();
        // rect.on('click', function (e) {
        //     // console.log('我被点击了')
        //     window.open('http://yishao.top')

        // });
        // var rect1 = new zrender.Rect({
        //     shape:{
        //         x:50,
        //         y:100,
        //         width:100,
        //         height:200,
        //     },
        //     style:{
        //         // fill:'red',
        //         stroke:'none',
        //     },
        //     z:10,
        // });


        var w = zr.getWidth();
        var h = zr.getHeight();

        var sun = new zrender.Circle({
        shape: {
            cx: 0,
            cy: 0,
            r: 50
        },
        style: {
            fill: '#FF904F'
        },
        position: [w / 2, h / 2],
        z:1,
    });
   


        var rect = new zrender.Rect({
            shape:{
                x:0,
                y:0,
                width:w,
                height:h/2,
            },
            style:{
                fill:new zrender.RadialGradient(0.5,-0.1,1,
                [
                    {
                        offset:0,
                        color:'#ff6040',
                    },
                    {
                        offset:0.3,
                        color:'#ffa040',
                    },
                    {
                        offset:1,
                        color:'#0060ff',
                    },
                ])

            },
            position:[0,h/2],
            z:10,

        });

        
        zr.add(sun);
        zr.add(rect);

        var sky = new zrender.Rect({
        shape: {
            cx: 0,
            cy: 0,
            width: w,
            height: h
        },
        style: {
            fill: '#D7F9FF'
        },
    });

    zr.add(sky);

        // var circle = new zrender.Circle({
        //     shape: {
        //         cx: w / 2,
        //         cy: h / 2,
        //         r: 50
        //     },
        //     style: {
        //         fill: '#FF6EBE'
        //     },
        //     // draggable: true
        // });

        // var heart = new zrender.Heart({
        //     shape: {
        //         cx: w / 2 + 20,
        //         cy: h / 2 - 40,
        //         width: 60,
        //         height: 80
        //     },
        //     // draggable: true
        // });

        // circle.setClipPath(heart);
        // // heart.setClipPath(circle);

        // // zr.add(heart);
        // zr.add(circle);



        // var circle1 = new zrender.Circle({
        //     shape: {
        //         cx: w / 2,
        //         cy: h / 2,
        //         r: 50
        //     },
        //     style: {
        //         fill: 'transparent',
        //         stroke:'#000',
        //     },
        //     // draggable: true
        // });

        // var heart1 = new zrender.Heart({
        //     shape: {
        //         cx: w / 2 + 20,
        //         cy: h / 2 - 40,
        //         width: 60,
        //         height: 80
        //     },
        //     style: {
        //         fill: 'transparent',
        //         stroke:'#000',
        //     },
        //     // draggable: true
        // });

        // // circle.setClipPath(heart);
        // // heart.setClipPath(circle);

        // // zr.add(heart);
        // zr.add(circle1);
        // zr.add(heart1);




        // zr.add(rect1);
        // zr.add(rect);
        // zr.add(circle);
        // zr.add(arc);

    </script>
</body>

</html>